<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 83 20"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path fill="#009CDE" d="M64.033 4.48h-4.542a.652.652 0 0 0-.631.53l-1.833 11.63a.37.37 0 0 0 .367.427h2.321a.422.422 0 0 0 .428-.366l.53-3.3a.62.62 0 0 1 .63-.53h1.427c2.994 0 4.704-1.445 5.152-4.317.204-1.242 0-2.24-.57-2.933-.61-.753-1.751-1.14-3.279-1.14Zm.53 4.237c-.245 1.63-1.487 1.63-2.689 1.63h-.692l.488-3.035a.373.373 0 0 1 .367-.326h.306c.814 0 1.588 0 1.995.468.245.286.306.693.225 1.263Z"/><path fill="#003087" d="M31.711 4.48H27.17a.652.652 0 0 0-.632.53l-1.833 11.63a.37.37 0 0 0 .367.427h2.159c.305 0 .57-.224.631-.53l.489-3.135a.62.62 0 0 1 .631-.53h1.426c2.994 0 4.704-1.446 5.152-4.318.204-1.242 0-2.24-.57-2.933-.61-.753-1.751-1.14-3.279-1.14Zm.53 4.237c-.245 1.63-1.487 1.63-2.689 1.63h-.692l.489-3.035a.373.373 0 0 1 .366-.326h.306c.814 0 1.588 0 1.996.468.244.286.305.693.224 1.263Zm13.014-.061h-2.18a.373.373 0 0 0-.366.326l-.102.61-.142-.223c-.469-.672-1.507-.917-2.566-.917-2.404 0-4.44 1.813-4.848 4.359-.203 1.263.082 2.485.815 3.34.672.774 1.609 1.1 2.73 1.1 1.934 0 2.993-1.243 2.993-1.243l-.102.611a.37.37 0 0 0 .367.428h1.955c.306 0 .57-.224.631-.53l1.182-7.433a.368.368 0 0 0-.367-.428Zm-3.014 4.236c-.204 1.243-1.202 2.078-2.444 2.078-.632 0-1.14-.204-1.467-.591-.325-.387-.448-.916-.346-1.527.204-1.222 1.202-2.098 2.424-2.098.61 0 1.12.204 1.446.59.346.408.489.937.387 1.548Z"/><path fill="#009CDE" d="M77.577 8.656h-2.18a.373.373 0 0 0-.366.326l-.102.61-.142-.223c-.469-.672-1.508-.917-2.567-.917-2.403 0-4.44 1.813-4.847 4.359-.204 1.262.082 2.484.815 3.34.672.774 1.609 1.1 2.729 1.1 1.935 0 2.994-1.243 2.994-1.243l-.102.611a.37.37 0 0 0 .367.428h1.955c.305 0 .57-.224.631-.53l1.181-7.433a.368.368 0 0 0-.366-.428Zm-3.014 4.236c-.204 1.242-1.202 2.078-2.445 2.078-.63 0-1.14-.204-1.466-.591-.326-.387-.448-.917-.346-1.528.204-1.222 1.201-2.097 2.424-2.097.61 0 1.12.203 1.445.59.347.408.49.937.388 1.548Z"/><path fill="#003087" d="M56.823 8.656h-2.179a.64.64 0 0 0-.53.285L51.1 13.38l-1.283-4.257a.636.636 0 0 0-.61-.448h-2.14a.389.389 0 0 0-.366.51l2.403 7.046-2.26 3.177c-.184.245 0 .59.305.59h2.18a.609.609 0 0 0 .509-.264l7.25-10.468c.224-.265.04-.611-.265-.611Z"/><path fill="#009CDE" d="M80.143 4.786 78.29 16.62a.37.37 0 0 0 .366.428h1.874c.305 0 .57-.224.631-.53l1.833-11.629a.37.37 0 0 0-.366-.427H80.53c-.204.02-.367.142-.387.325Zm-64.297.285c.244-1.547 0-2.607-.835-3.564C14.074.448 12.404 0 10.265 0H4.054a.895.895 0 0 0-.876.754L.57 17.169c-.061.326.204.611.53.611h3.828l-.264 1.67a.466.466 0 0 0 .468.53H8.37a.788.788 0 0 0 .774-.652l.04-.163.612-3.87.04-.203a.77.77 0 0 1 .775-.652h.488c3.137 0 5.58-1.263 6.294-4.95.305-1.547.142-2.83-.652-3.726a3.396 3.396 0 0 0-.896-.693Z"/><path fill="#012169" d="M15.846 5.071c.244-1.547 0-2.607-.835-3.564C14.074.448 12.404 0 10.265 0H4.054a.895.895 0 0 0-.876.754L.57 17.169c-.061.326.204.611.53.611h3.828l.958-6.11-.02.184a.88.88 0 0 1 .875-.754h1.833c3.584 0 6.395-1.446 7.21-5.662l.06-.367Z"/><path fill="#003087" d="M6.946 5.092a.807.807 0 0 1 .427-.59.959.959 0 0 1 .326-.082h4.888c.57 0 1.12.04 1.61.122.142.02.284.04.406.081.143.02.265.061.387.102l.184.061c.244.082.468.184.672.285.244-1.547 0-2.607-.835-3.564C14.074.448 12.404 0 10.265 0H4.054a.895.895 0 0 0-.876.754L.57 17.169c-.061.326.204.611.53.611h3.828l.958-6.11 1.059-6.578Z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class PaypalBlue extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
